<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://example.com/mytags" prefix="mytags"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Bootstrap样式表 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/user.css">


<title>书籍区</title>

</head>
<body>

	<!-- 导航栏 -->
	<nav class="navbar navbar-expand-lg">
		<a class="navbar-brand" href="#">书影音</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/home"/>">首页 <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item active"><a class="nav-link"
					href="<c:url value = "/book"/>">读书</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/movie"/>">影视</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/music"/>">音乐</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/filter"/>">筛选</a></li>	
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/user"/>">我的</a></li>
				
			</ul>
			<c:if test="${not empty sessionScope.user}">
            	<a class="nav-link" style="color:white"
					href="<c:url value = "/user"/>">欢迎您，${user.username }</a>
       	 	</c:if>
			<form class="form-inline my-2 my-lg-0" method="POST" action = "<c:url value = "/search"/>">
				<input class="form-control mr-sm-2 bg-transparent" type="search"  name="title" placeholder="搜索"
					aria-label="搜索">
				<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
			</form>
		</div>
	</nav>




	<!-- 首页 -->
	<div class="jumbotron" style="height: 200px;background: #fdfcfb" >
		<h1 class="display-4">欢迎来到书籍区</h1>
		<hr class="my-4">
	</div>
	<br>

	<div class="card" style="width: 900px; margin: 0 auto; height: 100px; position: relative;">
    <img class="card-img-top" src="resources/书.png" alt="加载中" style="height: 100%; width: 100%;">
    <div class="card-body" style="position: absolute; bottom: 0; right: 0;">
        <a href="<c:url value = '/book'/>" class="card-link"></a>
    </div>
</div>


	<div class="bookList">

		<c:forEach items="${bookList}" var="book">
			<div class="container mt-3">
				<div class="media border p-3" style="position: relative;">
					<img src="${book.imageUrl }" alt="${book.title }"
						class="mr-3 mt-3" style="width: 90px;">
					<div class="media-body">
						<h4>
							<c:out value="${book.title}" />
							<small><i> </i></small>
							<c:out value="${book.releaseDate}" />
							评分：
							<c:out value="${book.averageRating}" />
						</h4>
						<p>
							<c:out value="${book.description}" />
						</p>
					</div>
					<div style="position: absolute; bottom: 0; right: 0;">
						<a href="<c:url value = "/${book.id}"/>" class="card-link">查看评价详情</a>
					</div>
				</div>
			</div>


		</c:forEach>
	</div>



	<div>
		<mytags:pagination page="${page}" pageCount="${pageCount}" />

	</div>
	<br>
	<br>
	<!-- 页脚 -->
	<footer class=" text-center py-3"> &copy;
		2023 书影音 </footer>

	<!-- 引入Bootstrap的JavaScript和Popper.js，用于处理导航栏的交互效果 -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>